<template>
	<view class="page-content">
		<view class="top-view">
			<u-navbar :placeholder="true" :bgColor="barTopBg" ref="nbar">
				<view class="u-nav-slot" slot="left">
					<u-image
						src="https://dtkj-qnyimg.diankuai.com/%E9%A6%96%E9%A1%B5/%E5%B7%B2%E7%99%BB%E5%BD%95/%E6%8A%96%E7%89%B9.png"
						width="170rpx" height="60rpx" mode="scaleToFill"></u-image>
				</view>
			</u-navbar>
		</view>

		<view id="sView">
			<view class="swiper-box">
				<u-swiper :list="swiperList" @click="clickSwiper" indicator indicatorMode="line" radius="10"
					height="160" keyName="img">
				</u-swiper>
			</view>
			<view class="mt-20">
				<u-grid :border="false" :col="showXt1?5:4">
					<u-grid-item v-for="(item,index) in barList" :key="index" @click="goPage(item)">
						<view class="display_col_center" :url="item.page" :open-type="item.type">
							<u-image :src="item.icon" width="100rpx" height="100rpx"></u-image>
							<text class="mt-10 c_666666 f_28">{{item.name}}</text>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="notice-box bg_fff mt-20" style="margin-bottom: 20rpx;">
				<u-image
					src="https://dtkj-qnyimg.diankuai.com/%E9%A6%96%E9%A1%B5/%E5%B7%B2%E7%99%BB%E5%BD%95/%E5%85%AC%E5%91%8A.png"
					width="62rpx" height="60rpx"></u-image>
				<u-notice-bar :text="notice" direction="column" icon=" " color="#333" mode="link" bgColor="none"
					fontSize="16" @click="noticeClick">
				</u-notice-bar>
			</view>
		</view>

		<view :class="[(isFixedTop) ? 'fixedTop' : '']" id="box" class="box bgwhite" :style="'top:'+sTop+'px;'">
			<view>
				<u-tabs :list="typeList" @click="typeClick" lineColor="#333333"
					:activeStyle="{fontWeight: 'bold',color: '#333333',transform: 'scale(1.2)'}"
					:inactiveStyle="{color: '#999999'}"></u-tabs>
			</view>
		</view>
		<view :style="'height: 44px;'+(isFixedTop?'':'display: none;')"></view>

		<uni-list style="padding:0 2%;box-sizing: border-box;margin-bottom: 40rpx;" :border="false">
			<mission_item :dataItem="item" @clickItem="clickListItem" @goDetail="goDetail"
				v-for="(item, index) in dataList" :key="index">
			</mission_item>
		</uni-list>

	</view>
</template>

<script>
	import {
		getIndexSwiper,
		getPlatform,
		getMissions,
		getMissionDetail,
		getNotify,
		getConfig
	} from '@/config/api.js'

	export default {
		data() {
			return {
				statusBarHeight: 0,
				swiperList: [],
				barList: [{
					icon: "../../../../static/img/bar_aboutus.png",
					page: "/pages/webview/webview?tag=getAboutUs",
					type: "navigateTo",
					name: "关于我们"
				}, {
					icon: "../../../../static/img/bar_income.png",
					page: "/pages/center/income",
					type: "switchTab",
					name: "收益"
				}, {
					icon: "../../../../static/img/bar_service.png",
					page: "/pages/webview/webview?tag=getService",
					type: "navigateTo",
					name: "客服"
				}, {
					icon: "../../../../static/img/bar_ranking.png",
					page: "/pages/center/rank",
					type: "navigateTo",
					name: "排行"
				}],
				typeList: [],
				dataList: [],
				platform_flag: "all",
				page: 1,
				pages: 1,
				notice: [],
				barTopBg: "transparent",
				isFixedTop: false,
				sTop: 0,
				Topdistance: 0,
				showXt1: false,
				userinfo: null
			}
		},
		onLoad() {

		},
		mounted() {
			this.$nextTick(function() {
				this.GetTop();
			});

			this.userinfo = uni.getStorageSync('UserInfo');

			this.getData();
			getConfig().then(res => {
				if (res.value == 1) {
					this.showXt1 = true

					this.barList = [{
						icon: "../../../../static/img/bar_aboutus.png",
						page: "/pages/webview/webview?tag=getAboutUs",
						type: "navigateTo",
						name: "关于我们"
					}, {
						icon: "../../../../static/img/bar_course.png",
						page: "/pages/tabbar/tabbar-3/tabbar-3",
						type: "switchTab",
						name: "动态"
					}, {
						icon: "../../../../static/img/bar_income.png",
						page: "/pages/center/income",
						type: "navigateTo",
						name: "收益"
					}, {
						icon: "../../../../static/img/bar_service.png",
						page: "/pages/webview/webview?tag=getService",
						type: "navigateTo",
						name: "客服"
					}, {
						icon: "../../../../static/img/bar_ranking.png",
						page: "/pages/center/rank",
						type: "navigateTo",
						name: "排行"
					}]
				}
			})
		},
		methods: {
			GetTop() {
				var that = this;
				const query = uni.createSelectorQuery().in(this)
				query.select('#sView').boundingClientRect()
				query.selectViewport().scrollOffset()
				query.exec(function(res) {
					that.Topdistance = res[0].bottom - res[0].top + 150
				})

				uni.getSystemInfo({ //获取系统信息
					success: res => {
						this.statusBarHeight = res.statusBarHeight;
						var height = this.$refs.nbar.height;
						height = height.replace('px', '');
						this.sTop = parseInt(height) + res.statusBarHeight;
					},
					fail(err) {
						console.log(err);
					}
				})

				var that = this;
				uni.$on('onPageScroll', function(e) { //接收参数
					if (e.scrollTop == 0) {
						that.barTopBg = "transparent";
					} else if (e.scrollTop >= 40) {
						that.barTopBg = "#B52A2B";
					}

					if (e.scrollTop > that.Topdistance) {
						that.isFixedTop = true
					} else {
						that.isFixedTop = false
					}
				});

				uni.$on('onReachBottom', function(e) { //接收参数
					that.listScrollTolower();
				});
			},
			// onPageScroll: function(e) {
			// 	if (e.scrollTop == 0) {
			// 		this.barTopBg = "transparent";
			// 	} else if (e.scrollTop >= 40) {
			// 		this.barTopBg = "#B52A2B";
			// 	}

			// 	if (e.scrollTop > this.Topdistance) {
			// 		this.isFixedTop = true
			// 	} else {
			// 		this.isFixedTop = false
			// 	}
			// },
			goPage(item) {

				if (item.page == '/pages/center/rank') {
					uni.showToast({
						icon: 'none',
						title: ' 正在研发中...',
						duration: 2000
					});
					return;
				}

				uni.$u.route({
					url: item.page,
					type: item.type
				})
			},
			getData() {
				getIndexSwiper({
					keys: "HomePage"
				}).then((res) => {
					// console.log(res)
					this.swiperList = res;
				}).catch((err) => {

				});

				getPlatform().then((res) => {
					this.typeList = res;
				}).catch((err) => {

				});

				getNotify().then(res => {
					this.notice = [];
					for (var index = 0; index < res.list.length; index++) {
						var tmp = res.list[index];
						this.notice.push(tmp.name);
					}
				})

				this.getMissionsData();
			},
			clickSwiper(e) {
				console.log(e)
			},
			typeClick(data) {
				this.dataList = [];
				this.page = 1;
				this.pages = 1;
				this.platform_flag = data.flag;
				this.getMissionsData();
			},
			clickListItem(data) {
				uni.navigateTo({
					url: "/pages/mission/detail?id=" + data.id + "&showType=" + 2
				})
			},
			goDetail(data) {
				uni.navigateTo({
					url: "/pages/mission/detail?id=" + data.id + "&showType=" + 1
				})
			},
			getMissionsData() {
				getMissions({
					platform_flag: this.platform_flag,
					page: this.page,
					user_id: this.userinfo.id
				}).then((res) => {
					this.dataList = this.dataList.concat(res.list);
					this.pages = res.page.pages;
					this.page++;
				}).catch((err) => {

				});
			},
			listScrollTolower() {
				if (this.page <= this.pages) {
					this.getMissionsData();
				}
			},
			noticeClick(e) {
				uni.$u.route({
					url: "/pages/center/notice",
					type: "navigateTo"
				})
			}
		}
	}
</script>

<style scoped>
	.status_bar {
		width: 100%;
	}

	.top-view {
		background-image: url('https://dtkj-qnyimg.diankuai.com/%E9%A6%96%E9%A1%B5/%E5%B7%B2%E7%99%BB%E5%BD%95/%E5%9B%BE%E5%B1%82%2080.png');
		background-size: 100% 100%;
		width: 100%;
		min-height: 400rpx;
		box-sizing: content-box;
	}

	.swiper-box {
		width: 96%;
		box-sizing: border-box;
		margin-left: 2%;
		margin-top: -150rpx;
	}

	.notice-box {
		width: 96%;
		min-height: 90rpx;
		box-sizing: border-box;
		margin-left: 2%;
		border-radius: 15rpx;
		line-height: 90rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding-left: 20rpx;
	}

	.fixedTop {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.bgwhite {
		background-color: #F2F2F2;
	}
</style>
